<template>
  <div class="login">
    <h1>欢迎登录宝洁SFA系统</h1>
    <div class="top-hat"></div>
    <div class="login-box">
      <!-- logo -->
      <div class="logo-wrap">
        <div class="logo-box"></div>
      </div>
      <!-- form -->
      <div class="input-group" :class="{active: active_index===1, error: errors.has('cm_code')}">
        <label for="cm_code">公司编号：</label>
        <input @focus="active_index=1" v-validate="{ required: true, max: 6, min: 4 }" type="number" name="cm_code" id="cm_code" v-model="cm_code">
      </div>
      <div class="input-group" :class="{active: active_index===2, error: errors.has('PNO')}">
        <label for="PNO">员工编号：</label>
        <input @focus="active_index=2" v-validate="{ required: true, max: 12, min: 4 }" type="number" name="PNO" id="PNO" v-model="PNO">
      </div>
      <div class="input-group" :class="{active: active_index===3, error: errors.has('Passwd')}">
        <label for="Passwd">用户密码：</label>
        <input @focus="active_index=3" v-validate="{ required: true, max: 12, min: 6 }" type="password" name="Passwd" id="Passwd" v-model="Passwd">
      </div>
      <div class="ck-row">
        <div class="ckbox-wrap" @click="remembClick" :class="{active: rememb}">
          <i class="iconfont" :class="{'icon-check-square': rememb, 'icon-border': !rememb}"></i>
          <span>记住密码</span>
        </div>
        <div @click="autoLoginClick" class="ckbox-wrap" :class="{active: autologin}">
          <i class="iconfont" :class="{'icon-check-square': autologin, 'icon-border': !autologin}"></i>
          <span>自动登录</span>
        </div>
      </div>
    </div>
    <div class="btn-wrap" @click="LoginClick">
      <p>登录</p>
    </div>
  </div>
</template>

<script>
import "../assets/font/iconfont.css";
// 按需引入MintUI
import { Indicator, Toast } from "mint-ui";
import service from "../../service/index.js";
// 映射commit的方法
import { mapMutations } from "vuex";

export default {
  name: "login",
  data() {
    return {
      cm_code: "",
      PNO: "",
      Passwd: "",
      active_index: 1,
      rememb: false,
      autologin: false
    };
  },
  mounted() {
    // 强制校验一次
    //this.$validator.validate();
    // 验证localStorage中的数据
    let logindata = JSON.parse(localStorage.getItem("login-data"));
    if (logindata && logindata.rememb === true) {
      this.cm_code = logindata.CNO;
      this.PNO = logindata.PNO;
      this.Passwd = logindata.Passwd;
      this.rememb = logindata.rememb;
      this.autologin = logindata.autologin;
      if (logindata && logindata.autologin === true) {
        this.LoginClick();
      }
    }
  },
  components: {},
  methods: {
    ...mapMutations(["setLoginUser"]),
    autoLoginClick() {
      this.autologin = !this.autologin;
      if (this.autologin === true) {
        this.rememb = true;
      }
    },
    remembClick() {
      this.rememb = !this.rememb;
      if (this.rememb === false) {
        this.autologin = false;
      }
    },
    LoginClick() {
      // 强制校验一次
      this.$validator.validate();
      // 判断是否校验通过, 有错误返回true
      if (this.errors.any()) {
        console.log("has error");
        return;
      }

      // 后台进行验证
      Indicator.open("登录中...");
      service
        .login({
          PNO: this.PNO,
          CNO: this.cm_code,
          Passwd: this.Passwd
        })
        .then(result => {
          Indicator.close();
          console.log(result.data);
          // 向localStorage中插入数据
          localStorage.setItem(
            "login-data",
            JSON.stringify({
              rememb: this.rememb,
              autologin: this.autologin,
              PNO: this.rememb ? this.PNO : "",
              CNO: this.rememb ? this.cm_code : "",
              Passwd: this.rememb ? this.Passwd : ""
            })
          );
          // 把用户信息记录到VueX中， 记录到sessionStorage中是为了防止页面刷新vuex数据丢失
          sessionStorage.setItem("loginuser", JSON.stringify(result.data.user));
          sessionStorage.setItem("logintoken", result.data.token);
          //this.$store.commit("setLoginUser", result.data.user);
          this.setLoginUser(result.data.user);
          // 路由跳转
          this.$router.push("/home");
        })
        .catch(error => {
          Indicator.close();
          Toast("登录接口异常！");
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../lib/hotcss/px2rem.scss";
h1 {
  text-align: center;
  font-size: px2rem(36);
  height: px2rem(36);
  padding: px2rem(148-36-44) 0 px2rem(44) 0;
  line-height: px2rem(36);
  color: #fff;
}

@mixin login_wrap {
  width: px2rem(600);
  background-color: #fff;
  margin: 0 auto;
  border-radius: px2rem(20);
}
.login {
  background-color: #2ade69;
  height: 100%;
  .top-hat {
    width: px2rem(537);
    height: px2rem(18);
    background-color: #eee;
    margin: 0 auto;
    border-radius: px2rem(18) px2rem(18) 0 0;
  }
  .login-box {
    @include login_wrap();
    height: px2rem(836);
    .logo-wrap {
      padding: px2rem(80) 0;
      .logo-box {
        width: px2rem(190);
        height: px2rem(190);
        margin: 0 auto;
        background: url("../assets/logo.jpg");
        background-size: cover;
      }
    }
    @mixin rowStyle() {
      padding: 0 px2rem(36);
      color: $text-color;
      width: px2rem(401);
    }
    .input-group {
      border: 2px solid #e2e2e2;
      border-radius: px2rem(45);
      font-size: $text-size-mid;
      line-height: px2rem(90);
      @include rowStyle();
      margin: 0 auto px2rem(30);
      input {
        border: 0;
        font-size: $text-size-mid;
        line-height: px2rem(90);
        width: px2rem(200);
        padding-left: 1em;
      }
    }
    .input-group.active {
      color: $active-color;
      border: 2px solid $active-color;
    }
    .input-group.error {
      color: red;
      border: 2px solid red;
    }
    .ck-row {
      font-size: $text-size;
      @include rowStyle();
      display: flex;
      justify-content: space-around;
      .ckbox-wrap {
        padding-left: px2rem(36);
        padding-top: px2rem(8);
        i:before {
          display: inline-block;
          height: px2rem(32);
          width: px2rem(32);
          font-size: px2rem(32);
          margin-top: px2rem(2);
        }
      }
      .ckbox-wrap.active {
        color: $active-color;
      }
    }
  }
  .btn-wrap {
    @include login_wrap();
    height: px2rem(100);
    font-size: $text-size-imp;
    color: $active-color;
    text-align: center;
    line-height: px2rem(100);
    margin-top: px2rem(20);
    font-weight: 700;
    letter-spacing: px2rem(10);
  }
}
</style>

<style lang="scss">
html,
body,
#app {
  height: 100%;
}
</style>
